<!-- 电子签章 -->
<template>
  <div class="E_index">
    <!-- 电子签章 -->
    <pageHeader
      :title="title"
      :breadCrumb="breadCrumb"
      :show-back="true"
    ></pageHeader>
    <div class="content">
      <div>
        <a-space size="small">
          <a-input-search
            v-model="NumberSearch"
            :style="{ width: '220px' }"
            placeholder="需求单号"
            @search="Search"
          />
          <a-input-search
            v-model="CompanyNameVal"
            :style="{ width: '220px' }"
            placeholder="客户"
            @search="Search"
          />
          <a-select
            :style="{ width: '120px' }"
            v-model="StateVal"
            @search="Search"
          >
            <a-option :value="1">待提交</a-option>
            <a-option :value="2">待评审</a-option>
            <a-option :value="3">评审中</a-option>
            <a-option :value="4">已通过</a-option>
            <a-option :value="5">不通过</a-option>
          </a-select>
          <a-range-picker v-model="dateVal" @change="changeDate" />
          <a-button @click="reset">重置</a-button>
        </a-space>
      </div>

      <a-button type="primary" class="a_but" @click="Add">
        <template #icon>
          <icon-plus />
        </template>
        <span>添加电子印章</span>
      </a-button>
    </div>
    <div class="E_Tatle">
      <tableTurn :tableData="getElectronicseal" :args="args" ref="tableTurnRef">
        <a-table-column :width="80" align="center">
          <template #title> 序号 </template>
          <template #cell="{ rowIndex }">
            {{ rowIndex + 1 }}
          </template>
        </a-table-column>

        <a-table-column
          :width="200"
          align="center"
          title="印章预览"
          data-index="picAddr"
        >
          <template #cell="{ record }">
            <a-image width="100" height="100" :src="record.picAddr" />
          </template>
        </a-table-column>
        <a-table-column
          :width="100"
          align="center"
          title="印章名称"
          data-index="name"
        >
        </a-table-column>
        <a-table-column :width="200" align="center" title="规格">
          <template #cell="{ record }">
            <span>{{ record.shape.value }}({{ record.size.value }})</span>
          </template>
        </a-table-column>
        <a-table-column
          :width="100"
          align="center"
          title="印章类型"
          data-index="type"
        >
          <template #cell="{ record }">
            <span>{{ record.type.value }}</span>
          </template>
        </a-table-column>
        <a-table-column
          :width="200"
          align="center"
          title="制作时间"
          data-index="time"
        >
          <template #cell="{ record }">
            <span>{{
              `${dayjs(record.createdAt).format('YYYY-MM-DD hh:mm:ss')}`
            }}</span>
          </template>
        </a-table-column>
        <a-table-column
          :width="100"
          align="center"
          title="使用次数"
          data-index="time"
        >
        </a-table-column>
        <a-table-column
          :width="200"
          align="center"
          title="使用人"
          data-index="user"
        >
        </a-table-column>
        <a-table-column
          :width="100"
          align="center"
          title="印章状态"
          data-index=""
        >
          <template #cell="{ record }">
            <span>{{ record.enable === 1 ? '启用' : '停用' }}</span>
          </template>
        </a-table-column>
        <a-table-column align="center" :width="300" fixed="right" title="操作">
          <template #cell="{ record }">
            <a-popconfirm
              @ok="changeState(record)"
              :content="record.enable === 1 ? '确认停用吗' : '确认启用吗'"
              type="error"
            >
              <a-button type="text">
                {{ record.enable === 1 ? '停用' : '启用' }}
              </a-button>
            </a-popconfirm>
            <a-button type="text" @click="detailsjump(record.id)"
              >详情</a-button
            >
            <a-popconfirm
              @ok="deletingData(record.id)"
              content="确定删除吗"
              type="error"
            >
              <a-button
                type="text"
                :style="{
                  color: 'red',
                }"
                >删除</a-button
              >
            </a-popconfirm>
          </template>
        </a-table-column>
      </tableTurn>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, computed, reactive } from 'vue';
  import { useRouter } from 'vue-router';
  import {
    GetElectronicseal,
    Modifyseal,
    DeletingElectronicseal,
  } from '@/api/contract-management/base-setting/E-signature/index';
  import dayjs from 'dayjs';

  const router = useRouter();
  const title = '电子签章';
  const breadCrumb: string[] = ['合同管理', '基础设置', '电子签章'];
  let tableTurnRef: any = ref(); // 储存table的ref
  const args = reactive({
    stripe: true,
    // scroll: {
    //   y: 500,
    // },
    bordered: {
      headerCell: true,
    },
    rowKey: 'name', // 批量选择按钮以客户名称来作为key
  });
  const data: any = ref([]);
  const stateValue = ref(0); // 储存状态
  const searchVal = ref(''); // 储存印章名称
  let dateVal = ref([]); // 储存时间
  const isFirstSelect = ref(true);
  const NumberSearch = ref();
  const CompanyNameVal = ref();
  const StateVal = ref();
  // 通过搜索名字条件查询
  // 前
  // const SearchData = async (type: string) => {
  //   tableTurnRef.value.loadData();
  // };
  // 优化后，普通函数
  const SearchData = (type: string) => tableTurnRef.value.loadData();
  const requestData = (type: string, searchVal: any, stateValue: any) => {
    let datas: any = { pageSize: 10, pageIndex: 0 };
    if (type === 'all') {
      datas.name = searchVal.value;
      datas.status = stateValue.value;
    }
    return datas;
  };

  // 通过状态条件查询
  // const stateVal = () => {
  //   tableTurnRef.value.loadData();
  // };
  const stateVal = () => tableTurnRef.value.loadData();

  // 电子签单列表
  const getElectronicseal = async (pageData?: any) => {
    const data: any = {};
    if (searchVal.value !== '') data.name = searchVal.value;
    data.status = stateValue.value;
    if (dateVal.value) {
      data.startDate = dateVal.value[0];
      data.endDate = dateVal.value[1];
    }
    // if(stateValue.value !== )
    try {
      const res = await GetElectronicseal({
        ...pageData,
        ...data,
      });

      let temp = res;
      temp.content = temp.content.content;
      temp.content.forEach((item: any) => {
        const a = item.user.split('-').length;
        // 前
        // item.user = a;
        // const b = item.createdAt.split('T')[0];
        // const c = item.createdAt.split('T')[1].split('+')[0];
        // item.createdAt = `${b} ${c}`;
        // 使用字符串拼接createdAt，减少变量的创建
        item.createdAt =
          item.createdAt.split('T')[0] +
          ' ' +
          item.createdAt.split('T')[1].split('+')[0];
      });
      return Promise.resolve(temp);
    } catch (error: unknown) {
      console.log(error);
    }
  };

  // 查询制作时间
  const changeDate = () => {
    tableTurnRef.value.loadData();
  };

  // 修改电子印章状态
  const changeState = async (record: any) => {
    record.enable = record.enable === 1 ? 2 : 1;
    await Modifyseal({
      id: record.id,
      enable: record.enable,
    });
    tableTurnRef.value.loadData();
  };

  // 删除印章
  const deletingData = async (id: any) => {
    // const res = await DeletingElectronicseal({ id });
    await DeletingElectronicseal({ id });
    tableTurnRef.value.loadData();
  };

  const detailsjump = (id: any) => {
    // 前
    // const Jvalue = res;
    // router.push({
    //   name: 'S-details',
    //   query: {
    //     enable: Jvalue.enable,
    //     id: Jvalue.id,
    //     name: Jvalue.name,
    //     time: Jvalue.time,
    //     type: Jvalue.type.value,
    //     size: `${Jvalue.shape.value}/${Jvalue.size.value}`,
    //     createdAt: Jvalue.createdAt,
    //   },
    // });
    // 后，解构赋值
    router.push({
      name: 'S-details',
      query: {
        id,
      },
    });
  };

  // const Add = () => {
  //   router.push({
  //     name: 'addSeal',
  //   });
  // };
  const Add = () => router.push({ name: 'AddSeal' });

  // 重置按钮
  const reset = () => {
    stateValue.value = 0;
    searchVal.value = '';
    dateVal.value = [];
    tableTurnRef.value.loadData();
  };
</script>

<style scoped lang="less">
  .E_index {
    padding: 16px;

    .content {
      padding: 10px;
      display: flex;
      justify-content: space-between;
      // ::v-deep .arco-space-item:last-child {
      //   margin-left: 140px;
      // }

      // ::v-deep .img {
      //   width: 100px;
      //   height: 100px;
      // }

      // .arco-input-wrapper {
      //   background-color: white;
      //   border: 1px solid rgb(220, 223, 230);
      //   width: 220px;
      //   height: 32px;
      // }

      // ::v-deep .arco-select-view-single {
      //   width: 110px;
      //   background-color: white;
      //   border: 1px solid rgb(220, 223, 230);
      // }

      // .arco-btn {
      //   background-color: white;
      //   border: 1px solid rgb(220, 223, 230);
      // }
    }

    .E_Tatle {
      ::v-deep .arco-table-cell {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
      }

      ::v-deep .arco-table-td-content {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      ::v-deep .arco-table-cell {
        font-size: 11px;
      }
    }
  }
</style>
